<template>
  <!-- 监管方首页 -->
  <div class="app-container theme-bg-index">
    <header>
      <div class="center-img">
        <p>监管数据看板</p>
      </div>
    </header>
    <!-- 导航 -->
    <nav class="navbar">
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :push="3" :span="6">
              <div class="nav-item" @click="goStatis('/statisticalAnalysis/project-statistics')">项目统计信息</div>
            </el-col>
            <el-col :push="3" :span="6">
              <div class="nav-item" @click="goStatis('/statisticalAnalysis/enterprise-statistics')">企业统计信息</div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :push="10" :span="6">
              <div class="nav-item" @click="goStatis('/statisticalAnalysis/personnel-statistics')">人员统计信息</div>
            </el-col>
            <el-col :push="10" :span="6">
              <div class="nav-item" @click="goStatis('/statisticalAnalysis/equipment-statistics')">设备统计信息</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </nav>
    <!-- 内容区 -->
    <section>
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>项目数据展示</span>
              <span class="more" @click="goSecondPage()"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="12">
                <EchartsPie height="200px" :data="proInfoSuperviseVoListByRegion" :legend="[...reagionLegend]" />
              </el-col>
              <el-col :span="12">
                <EchartsPie height="200px" :data="proInfoSuperviseVoListByProTypeId" :legend="[...locationLegend]" />
              </el-col>
            </el-row>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>近一年项目产值</span>
              <span class="more" @click="goSecondPage()"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EchartsTwoBarLine
                height="200px"
                :x-data-arr="[...xDataArr]"
                :actual-arr="[...actualArr]"
                :project-total="[...projectTotal]"
                :contract="[...contract]"
                x-axis-name="月份"
              />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>企业项目产值总排名 Top5</span>
              <PriceOrder class="left" :command.sync="command3" :table-data.sync="moneyList" :pro-list.sync="enterpriseList" />
              <span class="more" @click="goEnterpriseOutputValueRanking()"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsBarX :command="command3" height="200px" :value-price-list="[...moneyList]" :pro-list="[...enterpriseList]" />
            </div>
          </div>

        </el-col>
        <el-col :span="12">
          <div class="map">
            <div class="bar-img" />
            <h3 class="title">项目分布</h3>
            <div class="cont">
<!--              <EcharsMap height="695px" :points="centerXY" />-->
              <Amap :points="centerXY" height="695px" />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <el-row :gutter="10" class="project-show">
            <el-col :span="12">
              <div class="item" @click="goSecondPage()">
                <p>{{ proNumAndMoney.proCount }} (个)</p>
                <p>施工中项目数</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="item" @click="goSecondPage()">
                <p>{{ proNumAndMoney.proContractAmount }} (万元)</p>
                <p>项目合同总金额</p>
              </div>
            </el-col>
          </el-row>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>山区项目单价TOP5</span>
              <PriceOrder class="left" :command.sync="command1" :table-data.sync="coteauPriceList" :pro-list.sync="coteauList" />
              <span class="more" @click="goProject('01',command === 'justice' ? '0' : '1','1')"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsReagion :command="command1" :value-price-list="[...coteauPriceList]" :pro-list="[...coteauList]" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>山前项目单价TOP5</span>
              <PriceOrder class="left" :command.sync="command2" :table-data.sync="midLevelsPriceList" :pro-list.sync="midLevelsList" />
              <span class="more" @click="goProject('03', command === 'justice' ? '0' : '1','1')"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsReagion :command="command2" :value-price-list="[...midLevelsPriceList]" :pro-list="[...midLevelsList]" />
            </div>
          </div>
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title">
              <span>平原项目单价TOP5</span>
              <PriceOrder class="left" :command.sync="command" :table-data.sync="plainPriceList" :pro-list.sync="plainList" />
              <span class="more" @click="goProject('02',command === 'justice' ? '0' : '1','1')"> 更多 <i class="el-icon-arrow-right" /></span>
            </h3>
            <div class="cont">
              <EcharsReagion :command="command" :value-price-list="[...plainPriceList]" :pro-list="[...plainList]" />
            </div>
          </div>
        </el-col>

        <el-col :span="24">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>施工中项目</span>
              <span class="more" @click="goProject()">
                更多
                <i class="el-icon-arrow-right" />
              </span>
            </h3>
            <div class="cont">
              <WarnProject :table-list="proInfoSuperviseVoList" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { superviseAnalysis } from '@/api/home'
import WarnProject from './components/WarnProject'
import PriceOrder from '@/components/EchartsComponents/PriceOrder'
import EcharsReagion from '@/components/EchartsComponents/EcharsReagion'
import EchartsPie from '@/components/EchartsComponents/EchartsPie'
import EcharsBarX from '@/components/EchartsComponents/EcharsBarX'
// import EcharsMap from '@/components/EchartsComponents/EcharsMap'
/** 高德地图 start*/
import Amap from '@/components/EchartsComponents/Amap'
/** 高德地图 end*/
import EchartsTwoBarLine from '@/components/EchartsComponents/EchartsTwoBarLine'
export default {
  name: 'SuperviseIndex',
  components: {
    EcharsBarX,
    // EcharsMap,
    Amap,
    EchartsPie,
    EcharsReagion,
    WarnProject,
    EchartsTwoBarLine,
    PriceOrder
  },
  data() {
    return {
      xDataArr: [],
      actualArr: [],
      projectTotal: [],
      contract: [],
      // 项目个数 合同金额
      proNumAndMoney: {
        proCount: 0,
        proContractAmount: 0
      },
      proInfoSuperviseVoListByProTypeId: [{ name: '无', value: 0, proportion: 0, price: 0 }], // 区县饼形图
      locationLegend: [], // 区县表头
      proInfoSuperviseVoListByRegion: [{ name: '无', value: 0, proportion: 0, price: 0 }], // 地区饼形图
      reagionLegend: [], // 地区类型表头
      superviseIndexVoByCoteau: [],
      superviseIndexVoByMidLevels: [],
      superviseIndexVoByPlain: [],
      proInfoSuperviseVoList: [], // 施工中项目列表
      centerXY: [], // 经纬度坐标点
      // 企业
      enterpriseList: [],
      moneyList: [],
      // 地区top5排名
      coteauList: [],
      coteauPriceList: [],
      midLevelsList: [],
      midLevelsPriceList: [],
      plainList: [],
      plainPriceList: [],
      command: 'reverse',
      command1: 'reverse',
      command2: 'reverse',
      command3: 'justice'
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const { data: {
        proNumAndMoney,
        proInfoSuperviseVoListByCompany,
        proInfoSuperviseVoListByProTypeId,
        proInfoSuperviseVoListByRegion,
        superviseIndexVoByCoteau,
        superviseIndexVoByMidLevels,
        superviseIndexVoByPlain,
        proInfoSuperviseVoList,
        proAmount
      }} = await superviseAnalysis()
      this.proNumAndMoney = {
        proCount: proNumAndMoney.proCount,
        proContractAmount: this.divideMoney(proNumAndMoney.proContractAmount, 6, true)
      }
      this.proInfoSuperviseVoList = proInfoSuperviseVoList
      this.centerXY = proInfoSuperviseVoList.map(item => {
        const { proNum, proName, workload, finishWorkload } = item
        return { lon: item.x, lat: item.y, proNum, proName, workload, finishWorkload }
      })
      // 企业排名
      proInfoSuperviseVoListByCompany.splice(0, 5).forEach(item => {
        this.enterpriseList.push(item.companyName)
        this.moneyList.push(item.companyMoney)
      })
      // 区县饼形图
      this.proInfoSuperviseVoListByProTypeId = proInfoSuperviseVoListByProTypeId.map(item => {
        const { proNum, proportion, regionTypeName, totalAmount } = item
        this.locationLegend.push(regionTypeName)
        return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
      })
      // 地区饼形图
      this.proInfoSuperviseVoListByRegion = proInfoSuperviseVoListByRegion.map(item => {
        const { proNum, proportion, regionTypeName, totalAmount } = item
        this.reagionLegend.push(regionTypeName)
        return { name: regionTypeName, value: proNum, proportion, price: this.divideMoney(totalAmount, 6, true) }
      })
      // 近一年产值
      proAmount.forEach(item => {
        const { time, totalProNum, workProAccount, workProNum } = item
        const month = +time.substr(-2, 2) + '月'
        this.actualArr.push(workProNum) // 施工项目数
        this.projectTotal.push(totalProNum) // 项目总数
        this.contract.push((workProAccount / 10000).toFixed(6))
        this.xDataArr.push(month) // 月份
      })
      // 地区排名 山区
      this.coteau = superviseIndexVoByCoteau.splice(0, 5).forEach(item => {
        this.coteauList.push(item.proNum)
        this.coteauPriceList.push(item.contractPrice)
        this.$nextTick(() => {
          this.coteauList = this.coteauList.reverse()
          this.coteauList = this.coteauPriceList.reverse()
        })
      })
      // 山前
      this.midLevels = superviseIndexVoByMidLevels.splice(0, 5).forEach(item => {
        this.midLevelsList.push(item.proNum)
        this.midLevelsPriceList.push(item.contractPrice)
        this.$nextTick(() => {
          this.coteauList = this.midLevelsList.reverse()
          this.coteauList = this.midLevelsPriceList.reverse()
        })
      })
      // 平原
      superviseIndexVoByPlain.splice(0, 5).forEach(item => {
        this.plainList.push(item.proNum)
        this.plainPriceList.push(item.contractPrice)
        this.$nextTick(() => {
          this.coteauList = this.plainList.reverse()
          this.coteauList = this.plainPriceList.reverse()
        })
      })
    },
    goSecondPage() {
      this.$router.push({
        path: '/secondPage'
      })
    },
    goProject(regionTypeId, sequenceWay, sequenceCondition) {
      this.$router.push({
        name: 'statisticsList-project',
        params: {
          regionTypeId,
          sequenceWay,
          sequenceCondition
        }
      })
    },
    goStatis(path) {
      this.$router.push(path)
    },
    // 企业产值排名
    goEnterpriseOutputValueRanking() {
      this.$router.push({
        name: 'enterpriseOutputValueRanking',
        params: {
          sequenceWay: this.command3 === 'justice' ? '0' : '1',
          sequenceCondition: '0' // 合同总金额
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
